<template>
  <h2>我是子组件</h2>
  <div ref="tmac">
    <p>所有成绩:{{ scoreList }}</p>
    <p>优秀成绩:{{ betterScore }}</p>
    <p>{{ watchCount }}</p>
    <button @click="addWatch">+watchCount</button>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
console.log('setup触发了')

onMounted(() => {
  console.log('onMouted触发了')
})
onMounted(() => {
  console.log('onMouted也触发了')
})
// let props = defineEmits<>()
const scoreList = ref([78, 67, 44, 88, 100])
const betterScore = computed(() => scoreList.value.filter((item) => item > 90))
let watchCount = ref(0)
let objUser = reactive({
  name: 'fxm',
  age: 3
})
console.log(`output->betterScore`, betterScore)
setTimeout(() => {
  scoreList.value.push(92, 97)
}, 3000)
const addWatch = () => {
  // watchCount.value++
  objUser.age++
}
watch(watchCount, () => {
  console.log('watch数据改变了')
})
watch([watchCount, objUser], () => {
  console.log('文章改变了')
})
setTimeout(() => {
  watchCount.value++
}, 3000)
setTimeout(() => {
  objUser.age++
}, 3000)

const tmac = ref(null)
console.log(tmac)
</script>

<style></style>
